<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jQuery UI Selectable - Display as grid</title>
<link rel="stylesheet" href="map/themes.css">
<link rel="stylesheet" href="map/jquery.css">
<script src="map/jquery-1.js"></script>
<script src="map/jquery_004.js"></script>
<script src="map/jquery_003.js"></script>
<script src="map/jquery.js"></script>
<script src="map/jquery_002.js"></script>
<link rel="stylesheet" href="css/sparkbox-select.css">
<script src="js/modernizr-1.7.min.js"></script>
<script src="js/jquery.sparkbox-select.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="map/demos.css">
<link rel="stylesheet" href="css/map.css">
<script>
	$(function() {
		$( "#selectable" ).selectable({
			stop: function() {
				$( ".ui-selected", this ).each(function() {
					var index = $( "#selectable li" ).index( this );
					alert( " #" + ( index + 1 ) );
				});
			}
		});
		
	});
	</script>
</head>
<body>
<div style="margin-left:100px;">
<div>Create new Cinema Map</div>
<div style="text-align:left; margin-left:200px;">Screen</div>
<div style="float:left">
    <div style="float:left">
        <ol class="ui-selectable" id="selectable">
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee"></li>
          <li class="ui-state-default ui-selectee ui-selected"></li>
        </ol>
    </div>
    <div style="float:left">
    <ol class="ui-selectable" id="indexRows">
        <li class="ui-state-default ui-selectee" style="clear:both">1</li>
        <li class="ui-state-default ui-selectee" style="clear:both">2</li>
        <li class="ui-state-default ui-selectee" style="clear:both">3</li>
        <li class="ui-state-default ui-selectee" style="clear:both">4</li>
        <li class="ui-state-default ui-selectee" style="clear:both">5</li>
        <li class="ui-state-default ui-selectee" style="clear:both">6</li>
        <li class="ui-state-default ui-selectee" style="clear:both">7</li>
        <li class="ui-state-default ui-selectee" style="clear:both">8</li>
        <li class="ui-state-default ui-selectee" style="clear:both">9</li>
        <li class="ui-state-default ui-selectee" style="clear:both">10</li>
        <li class="ui-state-default ui-selectee" style="clear:both">11</li>
        <li class="ui-state-default ui-selectee" style="clear:both">12</li>
        <li class="ui-state-default ui-selectee" style="clear:both">13</li>
        <li class="ui-state-default ui-selectee" style="clear:both">14</li>
        <li class="ui-state-default ui-selectee" style="clear:both">15</li>
        <li class="ui-state-default ui-selectee" style="clear:both">16</li>
        <li class="ui-state-default ui-selectee" style="clear:both">17</li>
        <li class="ui-state-default ui-selectee" style="clear:both">18</li>
        <li class="ui-state-default ui-selectee" style="clear:both">19</li>
        <li class="ui-state-default ui-selectee" style="clear:both">20</li>
    </ol>
    </div>
    <div style="clear:both">
        <ol class="ui-selectable" id="indexCols">
        <li class="ui-state-default ui-selectee">1</li>
        <li class="ui-state-default ui-selectee">2</li>
        <li class="ui-state-default ui-selectee">3</li>
        <li class="ui-state-default ui-selectee">4</li>
        <li class="ui-state-default ui-selectee">5</li>
        <li class="ui-state-default ui-selectee">6</li>
        <li class="ui-state-default ui-selectee">7</li>
        <li class="ui-state-default ui-selectee">8</li>
        <li class="ui-state-default ui-selectee">9</li>
        <li class="ui-state-default ui-selectee">10</li>
        <li class="ui-state-default ui-selectee">11</li>
        <li class="ui-state-default ui-selectee">12</li>
        <li class="ui-state-default ui-selectee">13</li>
        <li class="ui-state-default ui-selectee">14</li>
        <li class="ui-state-default ui-selectee">15</li>
        <li class="ui-state-default ui-selectee">16</li>
        <li class="ui-state-default ui-selectee">17</li>
        <li class="ui-state-default ui-selectee">18</li>
        <li class="ui-state-default ui-selectee">19</li>
        <li class="ui-state-default ui-selectee">20</li>
        <li class="ui-state-default ui-selectee">21</li>
        <li class="ui-state-default ui-selectee">22</li>
      </ol>
    </div>
</div>
<div style="float:left">
          <div style="height: 50px;">
            <ol class="ui-selectable" id="definition">
              <li class="seat-define standard"><span style="margin-left:30px">Standard</span></li>
              <li class="ui-state-default vip"><span style= "margin-left:30px">Vip</span></li>
              <li class="ui-state-default couple"><span style="margin-left:30px">Couple</span></li>
              <li class="ui-state-default space"><span style="margin-left:30px">Space</span></li>
            </ol>
      	</div>
          <div style="margin-left: 60px;">
           <form>
              <select class="sparkbox-custom">
                <option value="the_googs">Standard</option>
                <option value="the_faris">Vip</option>
                <option value="foxfire">Couple</option>
                <option value="the_splora">Space</option>
              </select>
            </form>
		</div>

</div>
</div>
</body>
</html>
